import React from 'react';
import './VehicleWhiteListDetail.scss';
import cookie from 'react-cookies';
import { Row, Col,Select,Table,Button,Input } from 'antd';
import { getTruckInfo } from '../../../api/dataCenter'
import Pagination from '../../../component/Pagination/Pagination.js';

const { Option } = Select;
const { Column } = Table;

class VehicleWhiteListDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            project_id: this.props.location.search.split('?')[1],
            gateType:undefined,
            keyWord:'',
            pageSize: 10,
            total_count: 0,
            current: 1,
            dataSource : [],
        }
    }

    componentDidMount() {
        console.log(this.props)
        console.log('项目ID', this.props.location.search)
        this.getList()
    }
    componentDidUpdate(prevProps) {

        const { search } = this.props.location;
        console.log('项目ID--', prevProps.location.search, search)
        if (prevProps.location.search !== search) {
            this.setState({
                project_id: search.split('?')[1]
            }, () => {
                this.getList()
            })
        }
    }

    //获取记录列表
    getList = () => {
        const { project_id, stateVal, gateType, keyWord, current } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': project_id,
            'state': stateVal,
            'truck_type': gateType,
            'search_text': keyWord,
            'page': current
        }
        console.log(post_data)
        getTruckInfo(post_data).then(res => {
            console.log(res)
            let dataSource = res.data.data_list
            let newList = []
            dataSource.forEach((item, i) => {
                newList.push({
                    key: i + 1 + (current-1) * 10,
                    ...item
                })
            })
            this.setState({
                total_count: res.data.total_count,
                dataSource: newList
            })
        })
    }
    //白名单类型
    handleType = value => {
        this.setState({
            gateType: value
        })
    }
    //白名单状态
    handleState = value => {
        this.setState({
            stateVal: value
        })
    }
    //条件搜索
    onChangeInput = (e) => {
        this.setState({
            keyWord: e.currentTarget.value
        })
    }
    //查询按钮
    search = () => {
        const { pageType } = this.state;
        console.log(pageType)
        this.setState({
            current: 1
        }, () => {
            this.getList()
        })
    }
    //清空按钮
    clear = () => {
        console.log('--')
        this.setState({
            stateVal: undefined,
            gateType: undefined,
            keyWord: '',
        }, () => {
            this.getList()
        })
    }
    //分页获取数据
    setPaginationPage = pageNumber => {
        console.log('Page: ', pageNumber);
        this.setState({
            current: pageNumber
        }, () => {
            this.getList()
        })
    }
    renderContent = (value, row, index, itemValue) => {
        const obj = {
            children: itemValue,
            props: {},
        };
        const { dataSource } = this.state;
        let num = 0;
        dataSource.forEach(item => {
            if (row.id === item.id) {
                num++
            }
        })
        if (index === 0) {
            obj.props.rowSpan = num;
        } else if (row.id !== dataSource[index - 1].id) {
            obj.props.rowSpan = num;
        } else {
            obj.props.rowSpan = 0;
        }
        return obj;
    };

   
    render() {
        const { id, stateVal, gateType, keyWord, dataSource, pageSize, total_count, current } = this.state;
        return (
            <div className="whiteCon">
                <div className="tipss">
                    <span className="blue"></span>
                    <span>车辆白名单</span>
                </div>
                <Row>
                    <Col span={12}>
                        <span className="tit">白名单类型：</span>
                        <Select value={gateType} size="small" placeholder="请选择白名单类型" onChange={this.handleType.bind(this)} allowClear>
                            <Option value="2">云排号</Option>
                            <Option value="1">本地排号</Option>
                        </Select>
                    </Col>
                    <Col span={12}>
                        <span className="tit">白名单状态：</span>
                        <Select value={stateVal} size="small" placeholder="请选择白名单状态" onChange={this.handleState.bind(this)} allowClear>
                            <Option value="1">已取号候场中</Option>
                            <Option value="2">已叫号</Option>
                            <Option value="4">站内作业中</Option>
                            <Option value="5">已卸货出站</Option>
                            <Option value="6">过期销号</Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col span={16}>
                        <span className="tit">关键词：</span>
                        <Input placeholder="可根据 车牌号/编号 进行搜索" value={keyWord} onChange={this.onChangeInput} />
                    </Col>
                    <Col span={8} className="bottom">
                        <Button className="search" onClick={this.search}>查询</Button>
                        <Button className="toClear" onClick={this.clear}>重置</Button>
                    </Col>
                </Row>
                <Row className="table">
                    <Col span={24}>
                        <Table dataSource={dataSource} pagination={false} rowKey={record => record.key} scroll={{ x: '100%' }} locale={{ emptyText: '暂无数据' }}>
                            <Column title="#" dataIndex="key" width='150px' key='0' />
                            <Column title="车牌号" dataIndex="plate_number" width='150px' key='1' />
                            <Column title="白名单编号" dataIndex="truck_number" width='150px' key='2' />
                            <Column title="白名单类型" render={item => item.truck_type === 1 ? '本地排号' : '云排号'} width='150px' key='3' />
                            <Column title="白名单状态" render={item => (() => {
                                if (item.state === 0) {
                                    return '未取号'
                                } else if (item.state === 1) {
                                    return '已取号候场中'
                                } else if (item.state === 2) {
                                    return '已叫号'
                                } else if (item.state === 3) {
                                    return '已叫号-催促'
                                } else if (item.state === 4) {
                                    return '站内作业中'
                                } else if (item.state === 5) {
                                    return '已卸货出站'
                                } else if (item.state === 6) {
                                    return '过期销号'
                                } else if (item.state === 7) {
                                    return '司机弃号'
                                } else if (item.state === 8) {
                                    return '取消排号'
                                } else if (item.state === 99) {
                                    return '黑名单已删除'
                                } else {
                                    return '--'
                                }
                            })()} width='150px' key='4' />
                            <Column title="白名单下发时间" dataIndex="take_num_time" width='150px' key='5' />
                            <Column title="上传用户" dataIndex="opt_user_name" width='150px' key='6' />
                            <Column title="" width="0px" key="7" fixed="right" />
                        </Table>
            
                    </Col>
                </Row>
                <Pagination pageSize={pageSize} total={total_count} current={current} getChangeData={this.setPaginationPage.bind(this)} />
            </div>
   
        )
    }
}

export default VehicleWhiteListDetail;